<template>

    <div v-loading="listLoading">

        <div style="margin-bottom:20px">
            <span style="color:#11a983"> 数据更新频率 ：</span>
            <el-select v-model="value" placeholder="刷新频率">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>


        <el-row :gutter="10" class="panel-group">
            
             <el-col v-for="item in memberDataList" :key="item.title"  :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
                    <div class="card-panel-icon-wrapper icon-people">
                        <icon :icon="item.icon"/>
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">
                            {{item.title}}
                        </div>
                        <span   class="card-panel-num" > {{item.data}} </span>
                        
                        <!-- <count-to :start-val="0" :end-val="item.data" :duration="2600" class="card-panel-num"/> -->
                    </div>
                </div>
            </el-col>

        </el-row>

        <el-row :gutter="10" class="panel-group" >
            
            <el-col  v-for="item in orderDataList" :key="item.title"  :xs="12" :sm="12" :lg="8" class="card-panel-col">
                <div class="card-panel" @click="handleSetLineChartData('shoppings')">
                    <div class="card-panel-icon-wrapper icon-shopping">
                        <icon icon="jifen"/>
                    </div>
                    <div class="card-panel-description">
                        <div class="card-panel-text">
                            {{item.title}}
                        </div>
                        <div>
                            <count-to :start-val="0" :end-val="item.orderCount" :duration="3600" class="card-panel-num"/>
                            <span style="color:red"> 单 </span>
                        </div>
                        <div>
                            <count-to :start-val="0" :end-val="item.orderAmount" :duration="3600" class="card-panel-num"     :decimals="2"/>
                            <span style="color:red"> 积分 </span>
                        </div>
                    </div>
                </div>
            </el-col>


 

        </el-row>
    </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
    components: {
        CountTo
    },
    data() {
        return {
            memberNum: 0,
            ticketAddNum: 0,
            transferNum: 0,
            transferCount: 0,
            memberActivationOne: 0,
            memberActivationTwo: 0,
            memberActivationThree: 0,
            memberDailyNum: 0,
            phoneRechargeNum: 0,
            electricityRechargeNum: 0,
            phonePayPoints: 0,
            electricityPayPoints: 0,
            vipOrderNum: 0,
            vipPayPoints: 0,
            movieOrderNum: 0,
            moviePayPoints: 0,
            hotelNum: 0,
            hotelPayPoints: 0,
            travelOrderNum: 0,
            travelPayPoints: 0,
            trainOrderNum: 0,
            trainTicketPayPoints: 0,
            flightOrderNum: 0,
            flightPayPoints: 0,
            orderInfoNum: 0,
            orderInfoPayPoints: 0,
            data: {},

            memberDataList:[],
            orderDataList:[],


            //定时器相关
            timer:'',
            options: [{
                value: 10, label: '10s'
            }, {
                value: 30, label: '30s'
            }, {
                value: 60, label: '1分钟'
            }, {
                value: 300, label: '5分钟'
            }],
            value: 300


        };
    },
    created() {
        this.getData();

        this.changeRefreshTime( this.value );
    },

    watch: {
        value( val, oldVal ){
            this.changeRefreshTime( val ,false );
        },
           
    },

    methods: {

        changeRefreshTime( val ){
            clearInterval( this.timer );
            console.log("设置刷新时间" , val );
            this.timer = setInterval(() => {
                this.getData()
            }, val *1000  );
        },

        getData() {
            // this.listLoading = true
            // this.memberDataList =[];
            // this.orderDataList =[];
            // //【API请求】----获取表格列表数据
            // this.$api.getHomePageCountList(this.pageRequest).then(response => {
            //     this.data = response.data
            //
            //     this.memberDataList.push(
            //         { "title" : "今日新增会员" , "data" : response.data.memberNum  , icon:'role'  } ,
            //         { "title" : "今日新增门票" , "data" : response.data.ticketAddNum  , icon:'dingdanshuliang'  } ,
            //         { "title" : "门票转增次数" , "data" : response.data.transferNum  , icon:'shangpin1'  } ,
            //         { "title" : "门票转增数量" , "data" : response.data.transferCount  , icon:'gongju'  } ,
            //         { "title" : "今日完成激励广告人数" , "data" : response.data.memberDailyNum  , icon:'role'  } ,
            //         { "title" : "活跃值>100会员数" , "data" : response.data.memberActivationOne  , icon:'role'  } ,
            //         { "title" : "活跃值>1000会员数" , "data" : response.data.memberActivationTwo  , icon:'role'  } ,
            //         { "title" : "活跃值>10000会员数" , "data" : response.data.memberActivationThree  , icon:'jifen'  } ,
            //     )
            //
            //     this.orderDataList.push(
            //         { "title" : "话费充值订单" , "orderCount": response.data.phoneRechargeNum  , "orderAmount" : response.data.phonePayPoints  ,  icon:''  } ,
            //         { "title" : "电费充值订单" , "orderCount": response.data.electricityRechargeNum  , "orderAmount" : response.data.electricityPayPoints  ,  icon:''  } ,
            //         { "title" : "会员卡充值订单" , "orderCount": response.data.vipOrderNum  , "orderAmount" : response.data.vipPayPoints  ,  icon:''  } ,
            //         { "title" : "影院兑换订单" , "orderCount": response.data.movieOrderNum  , "orderAmount" : response.data.moviePayPoints  ,  icon:''  } ,
            //         { "title" : "酒店兑换订单" , "orderCount": response.data.hotelNum  , "orderAmount" : response.data.hotelPayPoints  ,  icon:''  } ,
            //         { "title" : "景点兑换订单" , "orderCount": response.data.travelOrderNum  , "orderAmount" : response.data.travelPayPoints  ,  icon:''  } ,
            //         { "title" : "火车票兑换订单" , "orderCount": response.data.trainOrderNum  , "orderAmount" : response.data.trainTicketPayPoints  ,  icon:''  } ,
            //         { "title" : "飞机票兑换订单" , "orderCount": response.data.flightOrderNum  , "orderAmount" : response.data.flightPayPoints  ,  icon:''  } ,
            //         { "title" : "旅游线路兑换订单" , "orderCount": response.data.orderInfoNum  , "orderAmount" : response.data.orderInfoPayPoints  ,  icon:''  } ,
            //     )
            //     this.listLoading = false;
            // }).catch((res) => {
            //     console.log(res );
            //     this.$message({message: "会话过期", type: 'error'})
            //     this.$router.push("/login")
            // })
        },

        handleSetLineChartData(type) {
            this.$emit('handleSetLineChartData', type)
        }
    }
}
</script>

<style lang="scss" scoped>
.panel-group {
    margin-top: 0px;

    .card-panel-col {
        margin-bottom: 20px;
    }

    .card-panel {
        border-radius: 12px;
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-people {
                background: #40c9c6;
            }

            .icon-message {
                background: #36a3f7;
            }

            .icon-money {
                background: #f4516c;
            }

            .icon-shopping {
                background: #34bfa3
            }
        }

        .icon-people {
            color: #40c9c6;
        }

        .icon-message {
            color: #36a3f7;
        }

        .icon-money {
            color: #f4516c;
        }

        .icon-shopping {
            color: #34bfa3
        }

        .card-panel-icon-wrapper {
            float: left;
            margin: 14px 0 0 14px;
            padding: 16px;
            transition: all 0.38s ease-out;
            border-radius: 6px;

            i {
                font-size: 40px;
            }
        }

        .card-panel-icon {
            float: left;
            font-size: 48px;
        }

        .card-panel-description {
            text-align: right;
            float: right;
            font-weight: bold;
            margin: 26px;
            margin-left: 0px;

            .card-panel-text {
                line-height: 18px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 16px;
                margin-bottom: 12px;
            }

            .card-panel-num {
                font-size: 20px;
            }
        }
    }
}

@media (max-width: 550px) {
    .card-panel-description {
        display: none;
    }

    .card-panel-icon-wrapper {
        float: none !important;
        width: 100%;
        height: 100%;
        margin: 0 !important;

        .svg-icon {
            display: block;
            margin: 14px auto !important;
            float: none !important;
        }
    }
}
</style>
